<template>
	<view class="user-area">
		<view class="header-area padding-lr-sm" :style="{ 'padding-top': `${paddingTop}px` }">
			<view class="dflex-b">
				<view class="member-area padding-top-sm margin-bottom dflex pos-r flex1" @click="to('/sub-user/pages/setting/personal')">
					<view>
						<image class="headimg border-radius-c" :src="member.member_headimg || '/static/images/user/default.png'"></image>
					</view>
					<view class="margin-left-sm">
						<view class="info-box">
							<text v-if="islogin" class="fs-lg line-height-1">{{ member.member_nickname || config.appabbr }}</text>
							<text v-else class="fs-lg">去登录</text>
							<view v-if="member.slogan"><text class="fs-xxs">{{ member.slogan }}</text></view>
							<view v-else-if="member.member_city"><text class="fs-xxs">{{ member.member_city }}</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
	import { useStore } from 'vuex'
	
	const { proxy } = getCurrentInstance()
	const store = useStore()
	 
	const islogin = computed(() => store.state.islogin)
	const member = computed(() => store.state.member)
	const config = computed(() => proxy.$config)
	const paddingTop = computed(() => {
		return proxy.$api.navbar.top + 6
	})
	
	// 统一跳转接口，拦截未登录路由
	const to = (url) => {
		if (!islogin.value) {
			proxy.$api.tologin()
			return
		}
			
		uni.navigateTo({
			url
		})
	}
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: $page-color-base;
	}
	
	.member-area {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}
	
	.vip-card-area {
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		font-size: 24rpx;
		color: #c6b181;
		background-color: #000000;
		/* 不支持线性的时候显示 */
		background-image: linear-gradient(to right, #3a3a3a, #000000);
		
		.iconfont{font-size: 66rpx;}
	}
	
	.stats-area {
		.item {
			padding: 30rpx 0;
		}
	
		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 6rpx;
		}
	}
	
	.order-area {
		.item {}
	
		.iconfont {
			position: relative;
			font-size: $font-lg + 8upx;
	
			.badge {
				right: initial;
			}
		}
	}
	
	.stats-area .item,
	.order-area .item {
		position: relative;
		font-size: $font-sm;
		color: $font-color-base;
		flex: 1;
	}
	
	.browsing-area {
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}
	
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	
	.log-out-btn {
		color: $font-color-base;
	}
</style>
